<template>
  <div
    class="comp-loading"
    v-loading="loading"
    :element-loading-spinner="loadingStyle"
    element-loading-text="加载中。。。"
  ></div>
</template>

<script>
/**
 * @description CompLoading.vue
 * @author handle、
 * @CreatedTime 2021/7/2 16:10
 **/
export default {
  name: "CompLoading",
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
    loadingStyle: {
      type: String,
      default: "spinner-5",
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
  filters: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.classic-1 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  display: grid;
}

.classic-1:before,
.classic-1:after {
  content: "Loading...";
  grid-area: 1/1;
  -webkit-mask: linear-gradient(90deg, #000 50%, #0000 0) 0 50%/2ch 100%;
  animation: c1 1s infinite cubic-bezier(0.5, 220, 0.5, -220);
}

.classic-1:after {
  -webkit-mask-position: 1ch 50%;
  --s: -1;
}

@keyframes c1 {
  100% {
    transform: translateY(calc(var(--s, 1) * 0.1%));
  }
}

.classic-2 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  display: grid;
  overflow: hidden;
}

.classic-2:before,
.classic-2:after {
  content: "Loading...";
  grid-area: 1/1;
  clip-path: inset(0 -200% 50%);
  text-shadow: -10ch 0 0;
  animation: c2 1s infinite;
}

.classic-2:after {
  clip-path: inset(50% -200% 0);
  text-shadow: 10ch 0 0;
  --s: -1;
}

@keyframes c2 {
  50%,
  100% {
    transform: translateX(calc(var(--s, 1) * 100%));
  }
}

.classic-3 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  display: grid;
  overflow: hidden;
}

.classic-3:before,
.classic-3:after {
  content: "Loading...";
  grid-area: 1/1;
  clip-path: inset(0 -200% 50%);
  text-shadow: -10ch 0 0;
  animation: c3 2s infinite;
}

.classic-3:after {
  clip-path: inset(50% -200% 0);
  text-shadow: 10ch 0 0;
  --s: -1;
  animation-delay: 1s;
}

@keyframes c3 {
  25%,
  100% {
    transform: translateX(calc(var(--s, 1) * 100%));
  }
}

.classic-4 {
  padding-bottom: 5px;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  overflow: hidden;
  color: #0000;
  text-shadow: 0 0 0 #000, 10ch 0 0 #000;
  background: linear-gradient(#000 0 0) bottom left/0% 3px no-repeat;
  animation: c4 1.5s infinite;
}

.classic-4:before {
  content: "Loading...";
}

@keyframes c4 {
  80% {
    text-shadow: 0 0 0 #000, 10ch 0 0 #000;
    background-size: 100% 3px;
  }
  100% {
    text-shadow: -10ch 0 0 #000, 0 0 0 #000;
  }
}

.classic-5 {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 1.2em;
  display: grid;
}

.classic-5:before,
.classic-5:after {
  content: "Loading...";
  grid-area: 1/1;
  -webkit-mask: linear-gradient(90deg, #000 50%, #0000 0) 0 50%/2ch 100%;
  color: #0000;
  text-shadow: 0 0 0 #000, 0 calc(var(--s, 1) * 1.2em) 0 #000;
  animation: c5 1s infinite;
}

.classic-5:after {
  -webkit-mask-position: 1ch 50%;
  --s: -1;
}

@keyframes c5 {
  80%,
  100% {
    text-shadow: 0 calc(var(--s, 1) * -1.2em) 0 #000, 0 0 0 #000;
  }
}

.classic-6 {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  text-shadow: calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0, calc(-4 * var(--w)) 0,
    calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  animation: c6 2s infinite;
}

.classic-6:before {
  content: "Loading...";
}

@keyframes c6 {
  20% {
    text-shadow: calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0 red, calc(-3 * var(--w)) 0, calc(-4 * var(--w)) 0 #ffa516,
      calc(-5 * var(--w)) 0 #63fff4, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0 green,
      calc(-9 * var(--w)) 0;
  }
  40% {
    text-shadow: calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0 red, calc(-3 * var(--w)) 0 #e945e9, calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0 green, calc(-6 * var(--w)) 0 orange, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0 green,
      calc(-9 * var(--w)) 0;
  }
  60% {
    text-shadow: calc(-1 * var(--w)) 0 lightblue, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0 #e945e9,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0 green, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0 yellow,
      calc(-8 * var(--w)) 0 #ffa516, calc(-9 * var(--w)) 0 red;
  }
  80% {
    text-shadow: calc(-1 * var(--w)) 0 lightblue, calc(-2 * var(--w)) 0 yellow, calc(-3 * var(--w)) 0 #63fff4,
      calc(-4 * var(--w)) 0 #ffa516, calc(-5 * var(--w)) 0 red, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0 grey,
      calc(-8 * var(--w)) 0 #63fff4, calc(-9 * var(--w)) 0;
  }
}

.classic-7 {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 1.2em;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  animation: c7 2s infinite;
}

.classic-7:before {
  content: "Loading...";
}

@keyframes c7 {
  0% {
    text-shadow: calc(0 * var(--w)) -1.2em #000, calc(-1 * var(--w)) -1.2em #000, calc(-2 * var(--w)) -1.2em #000,
      calc(-3 * var(--w)) -1.2em #000, calc(-4 * var(--w)) -1.2em #000, calc(-5 * var(--w)) -1.2em #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  4% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) -1.2em #000, calc(-2 * var(--w)) -1.2em #000,
      calc(-3 * var(--w)) -1.2em #000, calc(-4 * var(--w)) -1.2em #000, calc(-5 * var(--w)) -1.2em #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  8% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -1.2em #000,
      calc(-3 * var(--w)) -1.2em #000, calc(-4 * var(--w)) -1.2em #000, calc(-5 * var(--w)) -1.2em #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  12% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) -1.2em #000, calc(-4 * var(--w)) -1.2em #000, calc(-5 * var(--w)) -1.2em #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  16% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) -1.2em #000, calc(-5 * var(--w)) -1.2em #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  20% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) -1.2em #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  24% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000,
      calc(-6 * var(--w)) -1.2em #000, calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000,
      calc(-9 * var(--w)) -1.2em #000;
  }
  28% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) -1.2em #000, calc(-8 * var(--w)) -1.2em #000, calc(-9 * var(--w)) -1.2em #000;
  }
  32% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) -1.2em #000, calc(-9 * var(--w)) -1.2em #000;
  }
  36% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) -1.2em #000;
  }
  40%,
  60% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  64% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 1.2em #000;
  }
  68% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 1.2em #000, calc(-9 * var(--w)) 1.2em #000;
  }
  72% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000, calc(-9 * var(--w)) 1.2em #000;
  }
  76% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 1.2em #000,
      calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000, calc(-9 * var(--w)) 1.2em #000;
  }
  80% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 1.2em #000,
      calc(-6 * var(--w)) 1.2em #000, calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000,
      calc(-9 * var(--w)) 1.2em #000;
  }
  84% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 1.2em #000, calc(-5 * var(--w)) 1.2em #000,
      calc(-6 * var(--w)) 1.2em #000, calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000,
      calc(-9 * var(--w)) 1.2em #000;
  }
  88% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 1.2em #000, calc(-4 * var(--w)) 1.2em #000, calc(-5 * var(--w)) 1.2em #000,
      calc(-6 * var(--w)) 1.2em #000, calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000,
      calc(-9 * var(--w)) 1.2em #000;
  }
  92% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 1.2em #000,
      calc(-3 * var(--w)) 1.2em #000, calc(-4 * var(--w)) 1.2em #000, calc(-5 * var(--w)) 1.2em #000,
      calc(-6 * var(--w)) 1.2em #000, calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000,
      calc(-9 * var(--w)) 1.2em #000;
  }
  96% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 1.2em #000, calc(-2 * var(--w)) 1.2em #000,
      calc(-3 * var(--w)) 1.2em #000, calc(-4 * var(--w)) 1.2em #000, calc(-5 * var(--w)) 1.2em #000,
      calc(-6 * var(--w)) 1.2em #000, calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000,
      calc(-9 * var(--w)) 1.2em #000;
  }
  100% {
    text-shadow: calc(0 * var(--w)) 1.2em #000, calc(-1 * var(--w)) 1.2em #000, calc(-2 * var(--w)) 1.2em #000,
      calc(-3 * var(--w)) 1.2em #000, calc(-4 * var(--w)) 1.2em #000, calc(-5 * var(--w)) 1.2em #000,
      calc(-6 * var(--w)) 1.2em #000, calc(-7 * var(--w)) 1.2em #000, calc(-8 * var(--w)) 1.2em #000,
      calc(-9 * var(--w)) 1.2em #000;
  }
}

.classic-8 {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  letter-spacing: calc(10 * var(--w));
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  animation: c8 3s infinite;
}

.classic-8:before {
  content: "Loading...";
}

@keyframes c8 {
  0% {
    text-shadow: calc(9 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-11 * var(--w)) 0 #000,
      calc(-21 * var(--w)) 0 #000, calc(-31 * var(--w)) 0 #000, calc(-41 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  4% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-11 * var(--w)) 0 #000,
      calc(-21 * var(--w)) 0 #000, calc(-31 * var(--w)) 0 #000, calc(-41 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  8% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-11 * var(--w)) 0 #000,
      calc(-21 * var(--w)) 0 #000, calc(-31 * var(--w)) 0 #000, calc(-41 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  12% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-21 * var(--w)) 0 #000, calc(-31 * var(--w)) 0 #000, calc(-41 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  16% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-31 * var(--w)) 0 #000, calc(-41 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  20% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-41 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  24% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-51 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  28% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-61 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  32% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-71 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  36% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-81 * var(--w)) 0 #000;
  }
  40%,
  60% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  64% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-10 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  68% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-20 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  72% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-30 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  76% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-40 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  80% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-49 * var(--w)) 0 #000, calc(-50 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  84% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-49 * var(--w)) 0 #000, calc(-59 * var(--w)) 0 #000, calc(-60 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  88% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-49 * var(--w)) 0 #000, calc(-59 * var(--w)) 0 #000, calc(-69 * var(--w)) 0 #000,
      calc(-70 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  92% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-49 * var(--w)) 0 #000, calc(-59 * var(--w)) 0 #000, calc(-69 * var(--w)) 0 #000,
      calc(-79 * var(--w)) 0 #000, calc(-80 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  96% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-49 * var(--w)) 0 #000, calc(-59 * var(--w)) 0 #000, calc(-69 * var(--w)) 0 #000,
      calc(-79 * var(--w)) 0 #000, calc(-89 * var(--w)) 0 #000, calc(-90 * var(--w)) 0 #000;
  }
  100% {
    text-shadow: calc(-9 * var(--w)) 0 #000, calc(-19 * var(--w)) 0 #000, calc(-29 * var(--w)) 0 #000,
      calc(-39 * var(--w)) 0 #000, calc(-49 * var(--w)) 0 #000, calc(-59 * var(--w)) 0 #000, calc(-69 * var(--w)) 0 #000,
      calc(-79 * var(--w)) 0 #000, calc(-89 * var(--w)) 0 #000, calc(-99 * var(--w)) 0 #000;
  }
}

.classic-9 {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 1.2em;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  animation: c9 2s infinite linear;
}

.classic-9:before {
  content: "Loading...";
}

@keyframes c9 {
  0% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  4% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  8% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  12% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0, calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  }
  16% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  }
  20% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  }
  24% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  }
  28% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  }
  32% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0, calc(-9 * var(--w)) 0;
  }
  36% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0;
  }
  40%,
  60% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  64% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  68% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0 #000, calc(-3 * var(--w)) 0 #000,
      calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000, calc(-7 * var(--w)) 0 #000,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  72% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0 #000,
      calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000, calc(-7 * var(--w)) 0 #000,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  76% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000, calc(-7 * var(--w)) 0 #000,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  80% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000, calc(-7 * var(--w)) 0 #000,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  84% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0 #000, calc(-7 * var(--w)) 0 #000,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  88% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0 #000,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  92% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  96% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0 #000;
  }
  100% {
    text-shadow: calc(0 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
}

.classic-10 {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 1.4em;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
    calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
    calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  animation: c10 2s infinite linear;
}

.classic-10:before {
  content: "Loading...";
}

@keyframes c10 {
  9.09% {
    text-shadow: calc(0 * var(--w)) -10px #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  18.18% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) -10px #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  27.27% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -10px #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  36.36% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) -10px #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  45.45% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) -10px #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  54.54% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) -10px #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  63.63% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) -10px #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  72.72% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) -10px #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  81.81% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) -10px #000, calc(-9 * var(--w)) 0 #000;
  }
  90.90% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) -10px #000;
  }
}

.dots-1 {
  width: 32px;
  height: 32px;
  --c: radial-gradient(circle closest-side, currentColor 90%, #0000);
  background: var(--c) 0 0, var(--c) 0 100%, var(--c) 100% 100%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: d1 1s infinite linear;
}

@keyframes d1 {
  25% {
    background-position: 100% 0, 0 100%, 100% 100%;
  }
  50% {
    background-position: 100% 0, 0 0, 100% 100%;
  }
  75% {
    background-position: 100% 0, 0 0, 0 100%;
  }
  100% {
    background-position: 100% 100%, 0 0, 0 100%;
  }
}

.dots-2 {
  width: 50px;
  height: 28px;
  --c: radial-gradient(farthest-side, currentColor 90%, #0000);
  background: var(--c) 0 50%, var(--c) 50% 50%, var(--c) 50% 50%, var(--c) 100% 50%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: d2 1s infinite linear;
}

@keyframes d2 {
  33% {
    background-position: 0 0, 50% 100%, 50% 100%, 100% 0;
  }
  66% {
    background-position: 50% 0, 0 100%, 100% 100%, 50% 0;
  }
  100% {
    background-position: 50% 50%, 0 50%, 100% 50%, 50% 50%;
  }
}

.dots-3 {
  width: 50px;
  height: 28px;
  background: radial-gradient(farthest-side at bottom, currentColor 90%, #0000) 0 calc(50% - 3px),
    radial-gradient(farthest-side at top, currentColor 90%, #0000) 0 calc(50% + 3px),
    radial-gradient(farthest-side at bottom, currentColor 90%, #0000) 50% calc(50% - 3px),
    radial-gradient(farthest-side at top, currentColor 90%, #0000) 50% calc(50% + 3px),
    radial-gradient(farthest-side at bottom, currentColor 90%, #0000) 100% calc(50% - 3px),
    radial-gradient(farthest-side at top, currentColor 90%, #0000) 100% calc(50% + 3px);
  background-size: 12px 6px;
  background-repeat: no-repeat;
  animation: d3 1s infinite linear;
}

@keyframes d3 {
  16.67% {
    background-position: 0 0, 0 100%, 50% calc(50% - 3px), 50% calc(50% + 3px), 100% calc(50% - 3px),
      100% calc(50% + 3px);
  }
  33.33% {
    background-position: 0 0, 0 100%, 50% 0, 50% 100%, 100% calc(50% - 3px), 100% calc(50% + 3px);
  }
  50% {
    background-position: 0 0, 0 100%, 50% 0, 50% 100%, 100% 0, 100% 100%;
  }
  66.67% {
    background-position: 0 calc(50% - 3px), 0 calc(50% + 3px), 50% 0, 50% 100%, 100% 0, 100% 100%;
  }
  83.33% {
    background-position: 0 calc(50% - 3px), 0 calc(50% + 3px), 50% calc(50% - 3px), 50% calc(50% + 3px), 100% 0,
      100% 100%;
  }
}

//.dots-4 {
//	width: 50px;
//	height: 28px;
//	background: radial-gradient(farthest-side, currentColor 90%, #0000) no-repeat 0 50%/12px 12px,
//	radial-gradient(farthest-side at bottom, currentColor 90%, #0000) no-repeat 50% calc(50% - 3px)/12px 6px,
//	radial-gradient(farthest-side at top, currentColor 90%, #0000) no-repeat 50% calc(50% + 3px)/12px 6px,
//	radial-gradient(farthest-side at bottom, currentColor 90%, #0000) no-repeat 100% calc(50% - 3px)/12px 6px,
//	radial-gradient(farthest-side at top, currentColor 90%, #0000) no-repeat 100% calc(50% + 3px)/12px 6px;
//	animation: d4 1s infinite;
//}
//
//@keyframes d4 {
//	25% {
//		background-position: 0 50%, 50% 0, 50% 100%, 100% 0, 100% 100%
//	}
//	50% {
//		background-position: 100% 50%, 0 0, 0 100%, 50% 0, 50% 100%
//	}
//	75%,
//	100% {
//		background-position: 100% 50%, 0 calc(50% - 3px), 0 calc(50% + 3px), 50% calc(50% - 3px), 50% calc(50% + 3px)
//	}
//}

.dots-5 {
  width: 50px;
  height: 12px;
  background: radial-gradient(farthest-side, currentColor 90%, #0000) no-repeat left,
    radial-gradient(farthest-side, currentColor 90%, #0000) no-repeat right;
  background-size: 12px 12px;
  position: relative;
  animation: d5-0 1s infinite linear;
}

.dots-5::before {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 50%;
  inset: 0 calc(50% - 6px);
  transform-origin: -13px 50%;
  animation: d5-1 0.5s infinite linear;
}

@keyframes d5-0 {
  0%,
  49.99% {
    transform: scale(1);
  }
  50%,
  100% {
    transform: scale(-1);
  }
}

@keyframes d5-1 {
  80%,
  100% {
    transform: rotate(1turn);
  }
}

.dots-6 {
  width: 30px;
  height: 27.6px;
  --c: radial-gradient(farthest-side, currentColor 90%, #0000);
  background: var(--c) 50% 0, var(--c) 0 100%, var(--c) 100% 100%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: d6 1s infinite;
}

@keyframes d6 {
  50%,
  100% {
    background-position: 100% 100%, 50% 0, 0 100%;
  }
}

.dots-7 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  clip-path: inset(-25px -100px);
  box-shadow: 19px -40px, 38px -40px, 57px -40px;
  transform: translateX(-38px);
  animation: d7 1s infinite;
}

@keyframes d7 {
  16.67% {
    box-shadow: 19px 0, 38px -40px, 57px -40px;
  }
  33.33% {
    box-shadow: 19px 0, 38px 0, 57px -40px;
  }
  45%,
  55% {
    box-shadow: 19px 0, 38px 0, 57px 0;
  }
  66.67% {
    box-shadow: 19px 40px, 38px 0, 57px 0;
  }
  83.33% {
    box-shadow: 19px 40px, 38px 40px, 57px 0;
  }
  100% {
    box-shadow: 19px 40px, 38px 40px, 57px 40px;
  }
}

.dots-8 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -19px 0, 19px 0;
  animation: d8 1s infinite;
}

@keyframes d8 {
  25% {
    box-shadow: -19px -19px, 19px 19px;
  }
  50% {
    box-shadow: 0 -19px, 0 19px;
  }
  75% {
    box-shadow: 19px -19px, -19px 19px;
  }
  100% {
    box-shadow: 19px 0, -19px 0;
  }
}

.dots-9 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  clip-path: inset(-45px);
  box-shadow: -60px 15px, -60px 15px, -60px 15px;
  transform: translateY(-15px);
  animation: d9 1s infinite linear;
}

@keyframes d9 {
  16.67% {
    box-shadow: -60px 15px, -60px 15px, 19px 15px;
  }
  33.33% {
    box-shadow: -60px 15px, 0 15px, 19px 15px;
  }
  40%,
  60% {
    box-shadow: -19px 15px, 0 15px, 19px 15px;
  }
  66.67% {
    box-shadow: -19px 15px, 0 15px, 60px 15px;
  }
  83.33% {
    box-shadow: -19px 15px, 60px 15px, 60px 15px;
  }
  100% {
    box-shadow: 60px 15px, 60px 15px, 60px 15px;
  }
}

.dots-10 {
  width: 76px;
  height: 12px;
  display: flex;
}

.dots-10:before,
.dots-10:after {
  content: "";
  flex: 1;
  background: radial-gradient(farthest-side, currentColor 90%, #0000) center/12px 100%,
    radial-gradient(farthest-side at right, currentColor 90%, #0000) right / 6px 100%;
  background-repeat: no-repeat;
  transform: scale(var(--s, 1)) translate(0px) rotate(0);
  animation: d10 2s infinite;
}

.dots-10:after {
  --s: -1;
}

@keyframes d10 {
  25% {
    transform: scale(var(--s, 1)) translate(-10px) rotate(0);
  }
  50% {
    transform: scale(var(--s, 1)) translate(-10px) rotate(1turn);
  }
  75%,
  100% {
    transform: scale(var(--s, 1)) translate(0px) rotate(1turn);
  }
}

.hypnotic-1 {
  width: 50px;
  height: 50px;
  border: 2px solid;
  display: grid;
  animation: h1 4s infinite linear;
}

.hypnotic-1::before,
.hypnotic-1::after {
  content: "";
  grid-area: 1/1;
  margin: auto;
  width: 70.7%;
  height: 70.7%;
  border: 2px solid;
  animation: inherit;
}

.hypnotic-1::after {
  width: 50%;
  height: 50%;
  border: 2px solid;
  animation-duration: 2s;
}

@keyframes h1 {
  100% {
    transform: rotate(1turn);
  }
}

.hypnotic-2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid;
  position: relative;
  transform-origin: left;
  animation: h2 1s infinite linear;
}

.hypnotic-2::before,
.hypnotic-2::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  margin: auto;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 2px solid;
  transform-origin: 50% calc(100% - 4px);
  animation: inherit;
}

.hypnotic-2::after {
  inset: auto 0 calc(100% + 2px);
  animation-duration: 0.5s;
  animation-direction: reverse;
  transform-origin: 50% calc(200% - 2px);
}

@keyframes h2 {
  100% {
    transform: rotate(1turn);
  }
}

.hypnotic-3 {
  width: 50px;
  height: 50px;
  border: 2px solid;
  background: conic-gradient(from -90deg at calc(100% - 2px) calc(100% - 2px), #0000 0 90deg, currentColor 0),
    conic-gradient(from -90deg at calc(100% - 2px) calc(100% - 2px), #0000 0 90deg, currentColor 0);
  background-size: 16px 16px;
  background-position: 0 0;
  animation: h3 1s infinite;
}

@keyframes h3 {
  100% {
    background-position: -16px -16px, 16px 16px;
  }
}

.hypnotic-4 {
  width: 50px;
  height: 50px;
  border: 2px solid;
  background: radial-gradient(farthest-side, #0000 calc(100% - 3px), currentColor calc(100% - 2px) 98%, #0000),
    radial-gradient(farthest-side, #0000 calc(100% - 3px), currentColor calc(100% - 2px) 98%, #0000);
  background-size: 23px 23px;
  background-position: 0 0, 12px 12px;
  animation: h4 1s infinite;
}

@keyframes h4 {
  100% {
    background-position: -23px 0, 12px 35px;
  }
}

.hypnotic-5 {
  width: 50px;
  height: calc(50px * 0.866);
  display: grid;
  background: linear-gradient(to bottom left, #0000 calc(50% - 1px), currentColor 0 calc(50% + 1px), #0000 0) right/50%
      100%,
    linear-gradient(to bottom right, #0000 calc(50% - 1px), currentColor 0 calc(50% + 1px), #0000 0) left / 50% 100%,
    linear-gradient(currentColor 0 0) bottom/100% 2px;
  background-repeat: no-repeat;
  transform-origin: 50% 66%;
  animation: h5 4s infinite linear;
}

.hypnotic-5::before,
.hypnotic-5::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  transform-origin: inherit;
  animation: inherit;
}

.hypnotic-5::after {
  animation-duration: 2s;
}

@keyframes h5 {
  100% {
    transform: rotate(1turn);
  }
}

.hypnotic-6 {
  width: 50px;
  height: 50px;
  display: grid;
  background: linear-gradient(90deg, currentColor 2px, #0000 0 calc(100% - 2px), currentColor 0) center/100% 14px,
    linear-gradient(0deg, currentColor 2px, #0000 0 calc(100% - 2px), currentColor 0) center/14px 100%,
    linear-gradient(currentColor 0 0) center/100% 2px, linear-gradient(currentColor 0 0) center/2px 100%;
  background-repeat: no-repeat;
  animation: h6 4s infinite linear;
}

.hypnotic-6::before,
.hypnotic-6::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  transform-origin: inherit;
  animation: inherit;
}

.hypnotic-6::after {
  animation-duration: 2s;
}

@keyframes h6 {
  100% {
    transform: rotate(1turn);
  }
}

.hypnotic-7 {
  width: 50px;
  height: 50px;
  border: 2px solid;
  background: repeating-conic-gradient(#0000 0 90deg, currentColor 0 180deg),
    repeating-conic-gradient(currentColor 0 90deg, #0000 0 180deg);
  background-size: 16px 16px;
  background-position: 0 0;
  animation: h7 2s infinite;
}

@keyframes h7 {
  100% {
    background-position: 0 32px, 16px 0;
  }
}

.hypnotic-8 {
  width: 50px;
  height: 50px;
  border: 2px solid;
  background: radial-gradient(farthest-side, currentColor 90%, #0000) left top,
    radial-gradient(farthest-side, #0000 90%, currentColor) left top;
  background-size: 16px 16px;
  animation: h8 2s infinite;
}

@keyframes h8 {
  100% {
    background-position: 0 32px, -16px 0;
  }
}

.hypnotic-9 {
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
  background: repeating-conic-gradient(#0000, currentColor 1deg 18deg, #0000 20deg 36deg);
  animation: h9 4s infinite linear;
}

.hypnotic-9::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: inherit;
  animation: inherit;
}

@keyframes h9 {
  100% {
    transform: rotate(0.5turn);
  }
}

.hypnotic-10 {
  width: 50px;
  height: 50px;
  display: grid;
}

.hypnotic-10::before,
.hypnotic-10::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: repeating-conic-gradient(#0000, currentColor 1deg 18deg, #0000 20deg 36deg);
  -webkit-mask: -repeating-webkit-gradient(farthest-side, #000 0 10%, #0000 0 20%);
  animation: h10 4s infinite linear;
}

.hypnotic-10::after {
  -webkit-mask: -repeating-webkit-gradient(farthest-side, #0000 0 10%, #000 0 20%);
  animation-direction: reverse;
}

@keyframes h10 {
  100% {
    transform: rotate(0.5turn);
  }
}

/*.spinner-1 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding: 6px;
	background: conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 4px)/17px 8.5px,
	radial-gradient(farthest-side at bottom left, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) top right/50%  50% content-box content-box,
	radial-gradient(farthest-side at top, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) bottom   /100% 50% content-box content-box;
	background-repeat: no-repeat;
	animation: s1 1s infinite linear;
}

@keyframes s1 {
	100% {
		transform: rotate(1turn)
	}
}*/

.spinner-2 {
  width: 50px;
  height: 50px;
  display: grid;
}

.spinner-2::before,
.spinner-2::after {
  content: "";
  grid-area: 1/1;
  --c: radial-gradient(farthest-side, #25b09b 92%, #0000);
  background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: s2 1s infinite;
}

.spinner-2::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear;
}

@keyframes s2 {
  100% {
    transform: rotate(0.5turn);
  }
}

.spinner-3 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #ffa516);
  -webkit-mask: -webkit-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: s3 1s infinite linear;
}

@keyframes s3 {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-4 {
  width: 50px;
  height: 50px;
  display: grid;
  animation: s4 4s infinite;
}

.spinner-4::before,
.spinner-4::after {
  content: "";
  grid-area: 1/1;
  border: 8px solid;
  border-radius: 50%;
  border-color: red red #0000 #0000;
  mix-blend-mode: darken;
  animation: s4 1s infinite linear;
}

.spinner-4::after {
  border-color: #0000 #0000 blue blue;
  animation-direction: reverse;
}

@keyframes s4 {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-5 {
  width: 50px;
  height: 50px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #25b09b;
  animation: s5 1s infinite linear;
}

.spinner-5::before,
.spinner-5::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: s5 2s infinite;
}

.spinner-5::after {
  margin: 8px;
  animation-duration: 3s;
}

@keyframes s5 {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-6 {
  width: 50px;
  height: 50px;
  display: grid;
  border: 4px solid;
  border-radius: 50%;
  border-color: #ccc #0000;
  animation: s6 1s infinite linear;
}

.spinner-6::before,
.spinner-6::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}

.spinner-6::before {
  border-color: #f03355 #0000;
  animation: inherit;
  animation-duration: 0.5s;
  animation-direction: reverse;
}

.spinner-6::after {
  margin: 8px;
}

@keyframes s6 {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-7 {
  width: 70px;
  height: 70px;
  background: radial-gradient(farthest-side, #ffa516 90%, #0000) center/16px 16px,
    radial-gradient(farthest-side, green 90%, #0000) bottom/12px 12px;
  background-repeat: no-repeat;
  animation: s7 1s infinite linear;
  position: relative;
}

.spinner-7::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  inset: auto 0 16px;
  margin: auto;
  background: #ccc;
  border-radius: 50%;
  transform-origin: 50% calc(100% + 10px);
  animation: inherit;
  animation-duration: 0.5s;
}

@keyframes s7 {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-8 {
  width: 50px;
  height: 50px;
  --c: radial-gradient(farthest-side, #514b82 92%, #0000);
  background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
  background-size: 10px 10px;
  background-repeat: no-repeat;
  animation: s8 1s infinite;
  position: relative;
}

.spinner-8::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: 3px;
  background: repeating-conic-gradient(#0000 0 35deg, #514b82 0 90deg);
  -webkit-mask: -webkit-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
  border-radius: 50%;
}

@keyframes s8 {
  100% {
    transform: rotate(0.5turn);
  }
}

.spinner-9 {
  width: 50px;
  height: 50px;
  display: grid;
  color: #854f1d;
  background: radial-gradient(farthest-side, currentColor calc(100% - 6px), #0000 calc(100% - 5px) 0);
  -webkit-mask: -webkit-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 12px));
  border-radius: 50%;
  animation: s9 2s infinite linear;
}

.spinner-9::before,
.spinner-9::after {
  content: "";
  grid-area: 1/1;
  background: linear-gradient(currentColor 0 0) center, linear-gradient(currentColor 0 0) center;
  background-size: 100% 10px, 10px 100%;
  background-repeat: no-repeat;
}

.spinner-9::after {
  transform: rotate(45deg);
}

@keyframes s9 {
  100% {
    transform: rotate(1turn);
  }
}

.spinner-10 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid #514b82;
  animation: s10-1 0.8s infinite linear alternate, s10-2 1.6s infinite linear;
}

@keyframes s10-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
  }
  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  }
  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);
  }
}

@keyframes s10-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

.shuriken-1 {
  width: 80px;
  height: 80px;
  color: #8d7958;
  background: conic-gradient(from 165deg at top, #0000, currentColor 1deg 30deg, #0000 31deg) top,
    conic-gradient(from 75deg at left, #0000, currentColor 1deg 30deg, #0000 31deg) left,
    conic-gradient(from -15deg at bottom, #0000, currentColor 1deg 30deg, #0000 31deg) bottom,
    conic-gradient(from -105deg at right, #0000, currentColor 1deg 30deg, #0000 31deg) right;
  background-size: 100% 50%, 50% 100%;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  background-repeat: no-repeat;
  animation: sh1 1.5s infinite linear;
}

@keyframes sh1 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-2 {
  width: 80px;
  height: 80px;
  color: #8d7958;
  background: conic-gradient(from 165deg at top, #0000, currentColor 1deg 30deg, #0000 31deg) top,
    conic-gradient(from 75deg at left, #0000, currentColor 1deg 30deg, #0000 31deg) left,
    conic-gradient(from -15deg at bottom, #0000, currentColor 1deg 30deg, #0000 31deg) bottom,
    conic-gradient(from -105deg at right, #0000, currentColor 1deg 30deg, #0000 31deg) right;
  background-size: 100% 50%, 50% 100%;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  background-repeat: no-repeat;
  animation: sh2 1.5s infinite linear;
}

.shuriken-2:before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: rotate(45deg);
}

@keyframes sh2 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-3 {
  width: 80px;
  height: 80px;
  display: grid;
  color: #8d7958;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  animation: sh3 1.5s infinite linear;
}

.shuriken-3:before,
.shuriken-3:after {
  content: "";
  grid-area: 1/1;
  background: radial-gradient(farthest-side at bottom left, currentColor 94%, #0000) top left,
    radial-gradient(farthest-side at top right, currentColor 94%, #0000) bottom right;
  background-size: 63% 50%;
  background-repeat: no-repeat;
  -webkit-mask: -webkit-gradient(65% 110% at bottom left, #0000 94%, #000) top left,
    -webkit-gradient(65% 110% at top right, #0000 94%, #000) bottom right;
  -webkit-mask-size: 62% 50%;
  -webkit-mask-repeat: no-repeat;
}

.shuriken-3:after {
  transform: rotate(90deg);
}

@keyframes sh3 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-4 {
  width: calc(80px * 0.707);
  height: calc(80px * 0.707);
  background: #8d7958;
  clip-path: polygon(0 0, 50% 15%, 100% 0, 85% 50%, 100% 100%, 50% 85%, 0 100%, 15% 50%);
  -webkit-mask: radial-gradient(circle closest-side, #0000 92%, #000) top / 100% 33.4%,
    radial-gradient(circle closest-side, #0000 92%, #000) left / 33.4% 33.4%,
    radial-gradient(circle 5px, #0000 92%, #000) center/33.3% 33.3%,
    radial-gradient(circle closest-side, #0000 92%, #000) right / 33.4% 33.4%,
    radial-gradient(circle closest-side, #0000 92%, #000) bottom/100% 33.4%;
  -webkit-mask-repeat: no-repeat;
  animation: sh4 1.5s infinite linear;
}

@keyframes sh4 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-5 {
  width: 80px;
  height: 80px;
  color: #8d7958;
  background: linear-gradient(currentColor 0 0) center/100% 15px, linear-gradient(currentColor 0 0) center/15px 100%,
    radial-gradient(circle 15px, currentColor 94%, #0000);
  background-repeat: no-repeat;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  clip-path: polygon(0 30px, calc(100% - 30px) 0, 100% calc(100% - 30px), 30px 100%);
  animation: sh5 1.5s infinite linear;
}

@keyframes sh5 {
  100% {
    transform: rotate(1turn);
  }
}

/*.shuriken-6 {
	width: 80px;
	height: 80px;
	display: grid;
	color: #8d7958;
	background: conic-gradient(from -153deg at right, #0000, currentColor 1deg 126deg, #0000 127deg) calc(50% + 5px) 0   /10px 50%,
	conic-gradient(from 27deg at left, #0000, currentColor 1deg 126deg, #0000 127deg) calc(50% - 5px) 100%/10px 50%,
	linear-gradient(to top right, currentColor 50%, #0000 0) calc(50% + 10px) calc(50% - 10px) /20px 20px,
	linear-gradient(to bottom left, currentColor 50%, #0000 0) calc(50% - 10px) calc(50% + 10px) /20px 20px;
	background-repeat: no-repeat;
	-webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
	animation: sh6 1.5s infinite linear;
}

.shuriken-6:before,
.shuriken-6:after {
	content: "";
	grid-area: 1/1;
	background: inherit;
	transform: rotate(60deg);
}

.shuriken-6:after {
	transform: rotate(120deg);
}

@keyframes sh6 {
	100% {
		transform: rotate(1turn)
	}
}*/

.shuriken-7 {
  width: 80px;
  height: 80px;
  color: #8d7958;
  background: radial-gradient(150% 150% at left -40% top -40%, #0000 98%, currentColor) no-repeat left top,
    radial-gradient(150% 150% at right -40% top -40%, #0000 98%, currentColor) no-repeat right top,
    radial-gradient(150% 150% at left -40% bottom -40%, #0000 98%, currentColor) no-repeat left bottom,
    radial-gradient(150% 150% at right -40% bottom -40%, #0000 98%, currentColor) no-repeat right bottom;
  background-size: 50.3% 50.3%;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  animation: sh7 1.5s infinite linear;
}

@keyframes sh7 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-8 {
  width: 80px;
  height: 80px;
  --c: #8d7958 91%, #0000;
  background: radial-gradient(30% 50% at -3px 55%, var(--c)) top right,
    radial-gradient(30% 50% at -3px 45%, var(--c)) bottom right,
    radial-gradient(30% 50% at calc(100% + 3px) 55%, var(--c)) top left,
    radial-gradient(30% 50% at calc(100% + 3px) 45%, var(--c)) bottom left,
    radial-gradient(50% 30% at 45% calc(100% + 3px), var(--c)) top right,
    radial-gradient(50% 30% at 45% -3px, var(--c)) bottom right,
    radial-gradient(50% 30% at 55% calc(100% + 3px), var(--c)) top left,
    radial-gradient(50% 30% at 55% -3px, var(--c)) bottom left;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  animation: sh8 1.5s infinite linear;
}

@keyframes sh8 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-9 {
  width: 80px;
  height: 80px;
  --c: #8d7958 98%, #0000;
  background: radial-gradient(50% 70% at 50% 120%, var(--c)) top, radial-gradient(70% 50% at -20% 50%, var(--c)) right,
    radial-gradient(50% 70% at 50% -20%, var(--c)) bottom, radial-gradient(70% 50% at 120% 50%, var(--c)) left;
  background-size: 100% 50.1%, 50.1% 100%;
  background-repeat: no-repeat;
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  animation: sh9 1.5s infinite linear;
}

@keyframes sh9 {
  100% {
    transform: rotate(1turn);
  }
}

.shuriken-10 {
  width: 80px;
  height: 80px;
  display: grid;
  color: #8d7958;
  background: radial-gradient(circle 16px, currentColor 94%, #0000);
  -webkit-mask: -webkit-gradient(circle 5px, #0000 90%, #000);
  animation: sh10 1.5s infinite linear;
}

.shuriken-10:before,
.shuriken-10:after {
  content: "";
  grid-area: 1/1;
  background: radial-gradient(farthest-side at bottom right, currentColor 94%, #0000) top right,
    radial-gradient(farthest-side at top left, currentColor 94%, #0000) bottom left;
  background-size: 40% 45%;
  background-repeat: no-repeat;
  -webkit-mask: -webkit-gradient(60% 100% at bottom right, #0000 94%, #000) top right,
    -webkit-gradient(60% 100% at top left, #0000 94%, #000) bottom left;
  -webkit-mask-size: 40% 45%;
  -webkit-mask-repeat: no-repeat;
}

.shuriken-10:after {
  transform: rotate(90deg);
}

@keyframes sh10 {
  100% {
    transform: rotate(1turn);
  }
}

.progress-1 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  animation: p1 2s infinite;
}

@keyframes p1 {
  0% {
    background: conic-gradient(#f03355 0, #0000 0);
  }
  12.5% {
    background: conic-gradient(#f03355 45deg, #0000 46deg);
  }
  25% {
    background: conic-gradient(#f03355 90deg, #0000 91deg);
  }
  37.5% {
    background: conic-gradient(#f03355 135deg, #0000 136deg);
  }
  50% {
    background: conic-gradient(#f03355 180deg, #0000 181deg);
  }
  62.5% {
    background: conic-gradient(#f03355 225deg, #0000 226deg);
  }
  75% {
    background: conic-gradient(#f03355 270deg, #0000 271deg);
  }
  87.5% {
    background: conic-gradient(#f03355 315deg, #0000 316deg);
  }
  100% {
    background: conic-gradient(#f03355 360deg, #0000 360deg);
  }
}

.progress-2 {
  width: 120px;
  height: 20px;
  background: linear-gradient(#000 50%, #0000 0), linear-gradient(#0000 50%, #000 0), linear-gradient(#000 50%, #0000 0),
    linear-gradient(#0000 50%, #000 0), linear-gradient(#000 50%, #0000 0), linear-gradient(#0000 50%, #000 0) #ddd;
  background-size: calc(100% / 6 + 1px) 200%;
  background-repeat: no-repeat;
  animation: p2 2s infinite;
}

@keyframes p2 {
  0% {
    background-position: calc(0 * 100% / 5) 100%, calc(1 * 100% / 5) 0, calc(2 * 100% / 5) 100%, calc(3 * 100% / 5) 0,
      calc(4 * 100% / 5) 100%, calc(5 * 100% / 5) 0;
  }
  16.67% {
    background-position: calc(0 * 100% / 5) 0, calc(1 * 100% / 5) 0, calc(2 * 100% / 5) 100%, calc(3 * 100% / 5) 0,
      calc(4 * 100% / 5) 100%, calc(5 * 100% / 5) 0;
  }
  33.33% {
    background-position: calc(0 * 100% / 5) 0, calc(1 * 100% / 5) 100%, calc(2 * 100% / 5) 100%, calc(3 * 100% / 5) 0,
      calc(4 * 100% / 5) 100%, calc(5 * 100% / 5) 0;
  }
  50% {
    background-position: calc(0 * 100% / 5) 0, calc(1 * 100% / 5) 100%, calc(2 * 100% / 5) 0, calc(3 * 100% / 5) 0,
      calc(4 * 100% / 5) 100%, calc(5 * 100% / 5) 0;
  }
  66.67% {
    background-position: calc(0 * 100% / 5) 0, calc(1 * 100% / 5) 100%, calc(2 * 100% / 5) 0, calc(3 * 100% / 5) 100%,
      calc(4 * 100% / 5) 100%, calc(5 * 100% / 5) 0;
  }
  83.33% {
    background-position: calc(0 * 100% / 5) 0, calc(1 * 100% / 5) 100%, calc(2 * 100% / 5) 0, calc(3 * 100% / 5) 100%,
      calc(4 * 100% / 5) 0, calc(5 * 100% / 5) 0;
  }
  100% {
    background-position: calc(0 * 100% / 5) 0, calc(1 * 100% / 5) 100%, calc(2 * 100% / 5) 0, calc(3 * 100% / 5) 100%,
      calc(4 * 100% / 5) 0, calc(5 * 100% / 5) 100%;
  }
}

.progress-3 {
  width: 124px;
  height: 24px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 0.5deg 90deg, #0000 90.5deg) 0 0,
    conic-gradient(from -45deg at bottom, #0000, #000 0.5deg 90deg, #0000 90.5deg) 0 100%;
  -webkit-mask-size: 25% 50%;
  -webkit-mask-repeat: repeat-x;
  background: linear-gradient(#25b09b 0 0) left/0% 100% no-repeat #ddd;
  animation: p3 2s infinite linear;
}

@keyframes p3 {
  100% {
    background-size: 100% 100%;
  }
}

/*.progress-4 {
	width: 60px;
	height: 50px;
	-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) calc(0 * 100% / 4) 100%/calc(100%/5) calc(1 * 100% / 5),
	linear-gradient(90deg, #000 70%, #0000 0) calc(1 * 100% / 4) 100%/calc(100%/5) calc(2 * 100% / 5),
	linear-gradient(90deg, #000 70%, #0000 0) calc(2 * 100% / 4) 100%/calc(100%/5) calc(3 * 100% / 5),
	linear-gradient(90deg, #000 70%, #0000 0) calc(3 * 100% / 4) 100%/calc(100%/5) calc(4 * 100% / 5),
	linear-gradient(90deg, #000 70%, #0000 0) calc(4 * 100% / 4) 100%/calc(100%/5) calc(5 * 100% / 5);
	-webkit-mask-repeat: no-repeat;
	background: linear-gradient(#514b82 0 0) left/0% 100% no-repeat #ddd;
	animation: p4 2s infinite steps(6);
}

@keyframes p4 {
	100% {
		background-size: 120% 100%
	}
}*/

.progress-5 {
  width: 80px;
  height: calc(80px * 0.866);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: #f03355;
  background: linear-gradient(currentColor 0 0) no-repeat, linear-gradient(currentColor 0 0) no-repeat,
    linear-gradient(currentColor 0 0) no-repeat, linear-gradient(currentColor 0 0) no-repeat,
    linear-gradient(currentColor 0 0) no-repeat;
  background-size: 100% calc(100% / 5 + 1px);
  animation: p5 2s infinite;
}

@keyframes p5 {
  0% {
    background-position: 0 calc(-2 * 100% / 4), 0 calc(-2 * 100% / 4), 0 calc(-2 * 100% / 4), 0 calc(-2 * 100% / 4),
      0 calc(-2 * 100% / 4);
  }
  20% {
    background-position: 0 calc(4 * 100% / 4), 0 calc(-2 * 100% / 4), 0 calc(-2 * 100% / 4), 0 calc(-2 * 100% / 4),
      0 calc(-2 * 100% / 4);
  }
  40% {
    background-position: 0 calc(4 * 100% / 4), 0 calc(3 * 100% / 4), 0 calc(-2 * 100% / 4), 0 calc(-2 * 100% / 4),
      0 calc(-2 * 100% / 4);
  }
  60% {
    background-position: 0 calc(4 * 100% / 4), 0 calc(3 * 100% / 4), 0 calc(2 * 100% / 4), 0 calc(-2 * 100% / 4),
      0 calc(-2 * 100% / 4);
  }
  80% {
    background-position: 0 calc(4 * 100% / 4), 0 calc(3 * 100% / 4), 0 calc(2 * 100% / 4), 0 calc(1 * 100% / 4),
      0 calc(-2 * 100% / 4);
  }
  100% {
    background-position: 0 calc(4 * 100% / 4), 0 calc(3 * 100% / 4), 0 calc(2 * 100% / 4), 0 calc(1 * 100% / 4),
      0 calc(0 * 100% / 4);
  }
}

.progress-6 {
  height: 4px;
  width: 130px;
  background: linear-gradient(#6100ee 0 0), linear-gradient(#6100ee 0 0), #d7b8fc;
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: p6 3s infinite;
}

@keyframes p6 {
  0% {
    background-position: -150% 0, -150% 0;
  }
  66% {
    background-position: 250% 0, -150% 0;
  }
  100% {
    background-position: 250% 0, 250% 0;
  }
}

.progress-7 {
  width: 120px;
  height: 20px;
  -webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) left/20% 100%;
  background: linear-gradient(#000 0 0) left/0% 100% no-repeat #ddd;
  animation: p7 2s infinite steps(6);
}

@keyframes p7 {
  100% {
    background-size: 120% 100%;
  }
}

.progress-8 {
  width: 60px;
  height: 60px;
  border: 15px solid #ddd;
  border-radius: 50%;
  position: relative;
  transform: rotate(45deg);
}

.progress-8::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 15px solid #514b82;
  animation: p8 2s infinite linear;
}

@keyframes p8 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.progress-9 {
  width: 60px;
  height: 60px;
  background: linear-gradient(#dc1818 0 0) bottom/100% 0 no-repeat #ccc;
  -webkit-mask: -webkit-gradient(circle at 60% 65%, #000 62%, #0000 65%) top left,
    -webkit-gradient(circle at 40% 65%, #000 62%, #0000 65%) top right,
    -webkit-gradient(to bottom left, #000 42%, #0000 43%) bottom left,
    -webkit-gradient(to bottom right, #000 42%, #0000 43%) bottom right;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  animation: p9 2s infinite linear;
}

@keyframes p9 {
  90%,
  100% {
    background-size: 100% 100%;
  }
}

.progress-10 {
  --s: 40px;
  height: calc(var(--s) * 0.9);
  width: calc(var(--s) * 5);
  --v1: transparent, #000 0.5deg 108deg, #0000 109deg;
  --v2: transparent, #000 0.5deg 36deg, #0000 37deg;
  -webkit-mask: conic-gradient(from 54deg at calc(var(--s) * 0.68) calc(var(--s) * 0.57), var(--v1)),
    conic-gradient(from 90deg at calc(var(--s) * 0.02) calc(var(--s) * 0.35), var(--v2)),
    conic-gradient(from 126deg at calc(var(--s) * 0.5) calc(var(--s) * 0.7), var(--v1)),
    conic-gradient(from 162deg at calc(var(--s) * 0.5) 0, var(--v2));
  -webkit-mask-size: var(--s) var(--s);
  -webkit-mask-composite: xor, destination-over;
  mask-composite: exclude, add;
  -webkit-mask-repeat: repeat-x;
  background: linear-gradient(#ffb940 0 0) left/0% 100% #ddd no-repeat;
  animation: p10 2s infinite linear;
}

@keyframes p10 {
  90%,
  100% {
    background-size: 100% 100%;
  }
}

.flipping-1 {
  width: 40px;
  height: 40px;
  background: #000;
  transform: perspective(150px) rotateX(0);
  animation: f1 1s infinite;
}

@keyframes f1 {
  100% {
    transform: perspective(150px) rotateX(180deg);
  }
}

.flipping-2 {
  width: 40px;
  height: 40px;
  transform: perspective(150px) rotateX(0);
  animation: f1-1 2s infinite linear, f1-2 1s infinite linear alternate;
}

@keyframes f1-1 {
  100% {
    transform: perspective(150px) rotateX(360deg);
  }
}

@keyframes f1-2 {
  0%,
  49.9% {
    background: #ffa516;
  }
  50%,
  100% {
    background: #f03355;
  }
}

.flipping-3 {
  width: 40px;
  height: 40px;
  transform: perspective(150px) rotateX(0) rotateY(0);
  animation: f3-1 2s infinite linear, f3-2 3s infinite linear -0.5s;
}

@keyframes f3-1 {
  50% {
    transform: perspective(150px) rotateX(180deg) rotateY(0);
  }
  100% {
    transform: perspective(150px) rotateX(180deg) rotateY(180deg);
  }
}

@keyframes f3-2 {
  0%,
  33% {
    background: #ffa516;
  }
  33.1%,
  66% {
    background: #f03355;
  }
  66.1%,
  100% {
    background: #25b09b;
  }
}

.flipping-4 {
  width: 60px;
  height: 60px;
  animation: f4-0 2s infinite linear;
}

.flipping-4::before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  transform: perspective(150px) rotateX(0deg);
  transform-origin: bottom;
  animation: f4-1 0.5s infinite linear alternate, f4-2 0.5s infinite linear alternate;
}

@keyframes f4-0 {
  0%,
  24.99% {
    transform: scale(1, 1) rotate(0deg);
  }
  25%,
  49.99% {
    transform: scale(1, -1) rotate(90deg);
  }
  50%,
  74.99% {
    transform: scale(-1, -1) rotate(0deg);
  }
  75%,
  100% {
    transform: scale(-1, 1) rotate(90deg);
  }
}

@keyframes f4-1 {
  100% {
    transform: perspective(150px) rotateX(180deg);
  }
}

@keyframes f4-2 {
  0%,
  49.9% {
    background: #ffa516;
  }
  50%,
  100% {
    background: #f03355;
  }
}

.flipping-5 {
  width: 60px;
  height: 60px;
  animation: f5-0 1s infinite linear;
}

.flipping-5::before,
.flipping-5::after {
  content: "";
  position: absolute;
  inset: 0 50% 50% 0;
  transform: scale(var(--s, 1)) perspective(150px) rotateX(0deg);
  transform-origin: bottom right;
  animation: f5-1 0.5s infinite linear alternate, f5-2 0.5s infinite linear alternate;
}

.flipping-5::after {
  --s: -1, -1;
}

@keyframes f5-0 {
  0%,
  49.99% {
    transform: scale(1, 1) rotate(0deg);
  }
  50%,
  100% {
    transform: scale(1, -1) rotate(90deg);
  }
}

@keyframes f5-1 {
  100% {
    transform: scale(var(--s, 1)) perspective(150px) rotateX(180deg);
  }
}

@keyframes f5-2 {
  0%,
  49.9% {
    background: #25b09b;
  }
  50%,
  100% {
    background: #514b82;
  }
}

.flipping-6 {
  width: 60px;
  height: 60px;
  color: #25b09b;
  background: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: f6-0 1.5s infinite linear alternate, f6-0-0 3s infinite linear;
}

.flipping-6::before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: currentColor;
  transform: perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right;
  animation: f6-1 1.5s infinite linear alternate;
}

@keyframes f6-0 {
  0%,
  32.99% {
    background-position: 0 100%, 100% 100%, 100% 0;
  }
  33%,
  65.99% {
    background-position: 100% 100%, 100% 100%, 100% 0;
  }
  66%,
  100% {
    background-position: 100% 0, 100% 0, 100% 0;
  }
}

@keyframes f6-0-0 {
  0%,
  49.99% {
    transform: scaleX(1) rotate(0deg);
  }
  50%,
  100% {
    transform: scaleX(-1) rotate(-90deg);
  }
}

@keyframes f6-1 {
  16.5% {
    transform: perspective(150px) rotateX(-90deg) rotateY(0deg) rotateX(0deg);
    filter: grayscale(0.8);
  }
  33% {
    transform: perspective(150px) rotateX(-180deg) rotateY(0deg) rotateX(0deg);
  }
  66% {
    transform: perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg);
  }
  100% {
    transform: perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);
    filter: grayscale(0.8);
  }
}

.flipping-7 {
  width: 60px;
  height: 60px;
  color: #ffa516;
  background: linear-gradient(currentColor 0 0) 100% 0, linear-gradient(currentColor 0 0) 0 100%;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: f7-0 1s infinite linear;
}

.flipping-7::before,
.flipping-7::after {
  content: "";
  position: absolute;
  inset: 0 50% 50% 0;
  background: currentColor;
  transform: scale(var(--s, 1)) perspective(150px) rotateY(0deg);
  transform-origin: bottom right;
  animation: f7-1 0.5s infinite linear alternate;
}

.flipping-7::after {
  --s: -1, -1;
}

@keyframes f7-0 {
  0%,
  49.99% {
    transform: scaleX(1) rotate(0deg);
  }
  50%,
  100% {
    transform: scaleX(-1) rotate(-90deg);
  }
}

@keyframes f7-1 {
  49.99% {
    transform: scale(var(--s, 1)) perspective(150px) rotateX(-90deg);
    filter: grayscale(0);
  }
  50% {
    transform: scale(var(--s, 1)) perspective(150px) rotateX(-90deg);
    filter: grayscale(0.8);
  }
  100% {
    transform: scale(var(--s, 1)) perspective(150px) rotateX(-180deg);
    filter: grayscale(0.8);
  }
}

.flipping-8 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: f8-0 2s infinite linear;
}

.flipping-8::before,
.flipping-8::after {
  content: "";
  flex: 1;
  animation: f8-1 1s infinite linear alternate, f8-2 2s infinite linear -0.5s;
}

.flipping-8::after {
  --s: -1, -1;
}

@keyframes f8-0 {
  0%,
  49.99% {
    transform: scaleX(1) rotate(0deg);
  }
  50%,
  100% {
    transform: scaleX(-1) rotate(-90deg);
  }
}

@keyframes f8-1 {
  0%,
  5% {
    transform: scale(var(--s, 1)) translate(0px) perspective(150px) rotateY(0deg);
  }
  33% {
    transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(0deg);
  }
  66% {
    transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(-180deg);
  }
  95%,
  100% {
    transform: scale(var(--s, 1)) translate(0px) perspective(150px) rotateX(-180deg);
  }
}

@keyframes f8-2 {
  0%,
  49.99% {
    background: #f03355;
  }
  50%,
  100% {
    background: #ffa516;
  }
}

.flipping-9 {
  width: 60px;
  height: 60px;
  color: #ffa516;
  border-radius: 50%;
  background: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: f9-0 1.5s infinite linear alternate, f9-0-0 3s infinite linear alternate;
}

.flipping-9::before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: currentColor;
  border-top-left-radius: 100px;
  transform: perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right;
  animation: f9-1 1.5s infinite linear alternate;
}

@keyframes f9-0 {
  0%,
  32.99% {
    background-position: 0 100%, 100% 100%, 100% 0;
  }
  33%,
  65.99% {
    background-position: 100% 100%, 100% 100%, 100% 0;
  }
  66%,
  100% {
    background-position: 100% 0, 100% 0, 100% 0;
  }
}

@keyframes f9-0-0 {
  0%,
  49.99% {
    transform: scaleX(1) rotate(0deg);
  }
  50%,
  100% {
    transform: scaleX(-1) rotate(-90deg);
  }
}

@keyframes f9-1 {
  16.5% {
    transform: perspective(150px) rotateX(-90deg) rotateY(0deg) rotateX(0deg);
    filter: grayscale(0.8);
  }
  33% {
    transform: perspective(150px) rotateX(-180deg) rotateY(0deg) rotateX(0deg);
  }
  66% {
    transform: perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg);
  }
  100% {
    transform: perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);
    filter: grayscale(0.8);
  }
}

.flipping-10 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: f10-0 2s infinite linear;
}

.flipping-10::before,
.flipping-10::after {
  content: "";
  flex: 1;
  animation: f10-1 1s infinite linear alternate, f10-2 2s infinite linear -0.5s;
}

.flipping-10::after {
  --s: -1, -1;
}

@keyframes f10-0 {
  0%,
  49.99% {
    transform: scaleX(1) rotate(0deg);
  }
  50%,
  100% {
    transform: scaleX(-1) rotate(-90deg);
  }
}

@keyframes f10-1 {
  0%,
  5% {
    transform: scale(var(--s, 1)) translate(0px) perspective(150px) rotateY(0deg);
  }
  33% {
    transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(0deg);
  }
  66% {
    transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(-180deg);
  }
  95%,
  100% {
    transform: scale(var(--s, 1)) translate(0px) perspective(150px) rotateX(-180deg);
  }
}

@keyframes f10-2 {
  0%,
  49.99% {
    background: #514b82;
    border-radius: 0;
  }
  50%,
  100% {
    background: #25b09b;
    border-radius: 100px 0 0 100px;
  }
}

.wobbling-1 {
  width: 30px;
  height: 30px;
  display: grid;
  transform: translateY(100%);
}

.wobbling-1::before,
.wobbling-1::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  transform-origin: bottom;
  position: relative;
}

.wobbling-1::before {
  background: radial-gradient(at 30% 30%, #0000, #000a) red;
  transform: scaleY(0.65);
  top: 0;
  animation: w1-1, w1-2;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0, 400, 1, 400), ease;
  animation-iteration-count: infinite;
}

.wobbling-1::after {
  background: #ccc;
  filter: blur(8px);
  transform: scaleY(0.3) translate(0px, 0);
  left: 0;
  animation: w1-3 2s cubic-bezier(0, 400, 1, 400) infinite;
}

@keyframes w1-1 {
  100% {
    top: -0.2px;
  }
}

@keyframes w1-2 {
  4%,
  96% {
    transform: scaleY(1);
  }
}

@keyframes w1-3 {
  100% {
    transform: scaleY(0.3) translate(0.1px, -0.1px);
  }
}

.wobbling-2 {
  width: 100px;
  height: 60px;
  display: flex;
  animation: w2-0 2s infinite linear;
}

.wobbling-2::before,
.wobbling-2::after {
  content: "";
  flex: 4;
  background: radial-gradient(at 50% 20%, #0000, #000a) bottom left/20px 20px repeat-x,
    linear-gradient(red 0 0) bottom/100% 20px no-repeat #ddd;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, #0000 0 20px) 8px 0,
    radial-gradient(farthest-side, #000 90%, #0000) left bottom/20px 20px repeat-x;
}

.wobbling-2::after {
  flex: 1;
  transform-origin: top;
  animation: w2-1 1s cubic-bezier(0, 20, 1, 20) infinite;
}

@keyframes w2-0 {
  0%,
  49.9% {
    transform: scaleX(1);
  }
  50%,
  100% {
    transform: scaleX(-1);
  }
}

@keyframes w2-1 {
  100% {
    transform: rotate(-2deg);
  }
}

.wobbling-3 {
  width: 20px;
  height: 20px;
  animation: w3-0 2s linear infinite;
}

.wobbling-3::before,
.wobbling-3::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(at 30% 30%, #0000, #000a) red;
  animation: w3-1 0.5s cubic-bezier(0.5, -500, 0.5, 500) infinite;
}

.wobbling-3::after {
  animation-delay: -0.15s;
}

@keyframes w3-0 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes w3-1 {
  100% {
    transform: translate(0.5px);
  }
}

.wobbling-4 {
  width: 80px;
  height: 80px;
  background: radial-gradient(farthest-side at top, #0000 calc(100% - 21px), lightblue calc(100% - 20px) 99%, #0000)
      bottom/100% 50%,
    radial-gradient(farthest-side, lightblue 94%, #0000) left / 20px 20px,
    radial-gradient(farthest-side, lightblue 94%, #0000) right/20px 20px;
  background-repeat: no-repeat;
  position: relative;
}

.wobbling-4::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  inset: auto 0 0;
  margin: auto;
  border-radius: 50%;
  background: orange;
  transform-origin: 50% -20px;
  animation: w4 1s infinite cubic-bezier(0.5, 623, 0.5, -623);
}

@keyframes w4 {
  100% {
    transform: rotate(0.5deg);
  }
}

.wobbling-5 {
  height: 80px;
  width: 20px;
  color: #514b82;
  background: radial-gradient(farthest-side, currentColor 94%, #0000) top/8px 8px,
    linear-gradient(currentColor 0 0) top/4px 70%,
    conic-gradient(from -30deg at bottom, #0000, currentColor 2deg 58deg, #0000 60deg) bottom / 100% 20px,
    conic-gradient(from 150deg at top, #0000, currentColor 2deg 58deg, #0000 60deg) bottom 20px left 0/100% 20px;
  background-repeat: no-repeat;
  transform-origin: 50% 4px;
  animation: w5 2s infinite cubic-bezier(0.5, 300, 0.5, -300);
}

@keyframes w5 {
  100% {
    transform: rotate(0.5deg);
  }
}

.wobbling-6 {
  width: 80px;
  height: 50px;
  background: radial-gradient(farthest-side, #0000 calc(100% - 15px), #ccc calc(100% - 14px) 99%, #0000) center/50px
      100%,
    linear-gradient(#ccc 0 0) bottom/100% 14px;
  background-repeat: no-repeat;
  position: relative;
  animation: w6-0 2s -0.5s infinite linear;
}

.wobbling-6:before {
  content: "";
  position: absolute;
  inset: auto auto 2px 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f03355;
  transform-origin: 50% -14px;
  animation: w6-1 0.5s infinite linear alternate;
}

@keyframes w6-0 {
  0%,
  49.99% {
    transform: scaleX(1);
  }
  50%,
  100% {
    transform: scaleX(-1);
  }
}

@keyframes w6-1 {
  0% {
    transform: translate(0) rotate(0);
  }
  50% {
    transform: translate(34px) rotate(0);
  }
  100% {
    transform: translate(34px) rotate(-180deg);
  }
}

.wobbling-7 {
  height: 20px;
  width: 80px;
  transform: rotate(-30deg);
  background: radial-gradient(farthest-side, #f03355 90%, #0000) left bottom/15px 15px no-repeat #ddd;
  animation: w7-0 2s infinite alternate linear, w7-1 2s infinite cubic-bezier(0.75, 0, 1, 0.6);
}

@keyframes w7-0 {
  50% {
    transform: rotate(30deg);
  }
}

@keyframes w7-1 {
  50% {
    background-position: right bottom;
  }
}

.wobbling-8 {
  height: 40px;
  width: calc(20px * 4);
  color: #25b09b;
  background: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: calc(100% / 4 + 1px) 50%;
  background-repeat: no-repeat;
  animation: w8 1s infinite cubic-bezier(0.5, 150, 0.5, -150);
}

@keyframes w8 {
  0% {
    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%, calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
  }
  100% {
    background-position: calc(0 * 100% / 3) 51%, calc(1 * 100% / 3) 50.5%, calc(2 * 100% / 3) 49.5%,
      calc(3 * 100% / 3) 49%;
  }
}

.wobbling-9 {
  height: 30px;
  width: calc(15px * 6);
  color: #514b82;
  background: linear-gradient(currentColor 0 0) calc(0 * 100% / 5) 50%,
    linear-gradient(currentColor 0 0) calc(1 * 100% / 5) 50%, linear-gradient(currentColor 0 0) calc(2 * 100% / 5) 50%,
    linear-gradient(currentColor 0 0) calc(3 * 100% / 5) 50%, linear-gradient(currentColor 0 0) calc(4 * 100% / 5) 50%,
    linear-gradient(currentColor 0 0) calc(5 * 100% / 5) 50%;
  background-size: calc(100% / 6 + 1px) 50%;
  background-repeat: no-repeat;
  animation: w9 1s infinite cubic-bezier(0.5, 170, 0.5, -170);
}

@keyframes w9 {
  14.28% {
    background-position: calc(0 * 100% / 5) 51%, calc(1 * 100% / 5) 50%, calc(2 * 100% / 5) 50%, calc(3 * 100% / 5) 50%,
      calc(4 * 100% / 5) 50%, calc(5 * 100% / 5) 50%;
  }
  28.57% {
    background-position: calc(0 * 100% / 5) 50%, calc(1 * 100% / 5) 51%, calc(2 * 100% / 5) 50%, calc(3 * 100% / 5) 50%,
      calc(4 * 100% / 5) 50%, calc(5 * 100% / 5) 50%;
  }
  42.85% {
    background-position: calc(0 * 100% / 5) 50%, calc(1 * 100% / 5) 50%, calc(2 * 100% / 5) 51%, calc(3 * 100% / 5) 50%,
      calc(4 * 100% / 5) 50%, calc(5 * 100% / 5) 50%;
  }
  57.14% {
    background-position: calc(0 * 100% / 5) 50%, calc(1 * 100% / 5) 50%, calc(2 * 100% / 5) 50%, calc(3 * 100% / 5) 51%,
      calc(4 * 100% / 5) 50%, calc(5 * 100% / 5) 50%;
  }
  71.42% {
    background-position: calc(0 * 100% / 5) 50%, calc(1 * 100% / 5) 50%, calc(2 * 100% / 5) 50%, calc(3 * 100% / 5) 50%,
      calc(4 * 100% / 5) 51%, calc(5 * 100% / 5) 50%;
  }
  85.71% {
    background-position: calc(0 * 100% / 5) 50%, calc(1 * 100% / 5) 50%, calc(2 * 100% / 5) 50%, calc(3 * 100% / 5) 50%,
      calc(4 * 100% / 5) 50%, calc(5 * 100% / 5) 51%;
  }
}

.shapes-1 {
  width: 40px;
  height: 40px;
  color: #25b09b;
  display: grid;
}

.shapes-1::before,
.shapes-1::after {
  content: "";
  grid-area: 1/1;
  background: currentColor;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  animation: sp1 2s infinite;
}

.shapes-1::after {
  animation-delay: -1.5s;
  --s: 90deg;
}

@keyframes sp1 {
  0%,
  12.5% {
    transform: rotate(var(--s, 0deg)) rotate(0deg);
  }
  37.5%,
  62.5% {
    transform: rotate(var(--s, 0deg)) rotate(-180deg);
  }
  87.5%,
  100% {
    transform: rotate(var(--s, 0deg)) rotate(-360deg);
  }
}

.shapes-2 {
  width: 40px;
  height: 40px;
  color: #514b82;
  background: repeating-conic-gradient(from -47deg, #0000 0deg, currentColor 1deg 91deg, #0000 94deg 180deg);
  display: flex;
  animation: sp2-0 2s infinite linear;
}

.shapes-2::before,
.shapes-2::after {
  content: "";
  flex: 1;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: sp2 1s infinite alternate;
  transform-origin: bottom left;
}

.shapes-2::after {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  transform-origin: top right;
}

@keyframes sp2-0 {
  0%,
  49.9% {
    transform: scaleX(1);
  }
  50%,
  100% {
    transform: scaleX(-1);
  }
}

@keyframes sp2 {
  0%,
  20% {
    transform: rotate(0deg);
  }
  80%,
  100% {
    transform: rotate(-270deg);
  }
}

.shapes-3 {
  width: 40px;
  height: 40px;
  color: orange;
  display: grid;
}

.shapes-3::before,
.shapes-3::after {
  content: "";
  grid-area: 1/1;
  background: currentColor;
  clip-path: polygon(0 0, 101% 0, 0 100%);
  animation: sp3 2s infinite;
}

.shapes-3::after {
  --s: -1, -1;
}

@keyframes sp3 {
  0%,
  10% {
    transform: scale(var(--s, 1)) translate(0, 0) rotate(0deg);
  }
  33% {
    transform: scale(var(--s, 1)) translate(20px, -20px) rotate(0deg);
  }
  66% {
    transform: scale(var(--s, 1)) translate(20px, -20px) rotate(180deg);
  }
  90%,
  100% {
    transform: scale(var(--s, 1)) translate(0px, 0) rotate(180deg);
  }
}

.shapes-4 {
  width: 40px;
  height: 40px;
  color: #f03355;
  background: conic-gradient(currentColor 0 270deg, #0000 0);
  border-radius: 50%;
  animation: sp4-0 4s infinite linear;
}

.shapes-4::before {
  content: "";
  display: block;
  height: 50%;
  width: 50%;
  border-top-left-radius: 100px;
  background: currentColor;
  animation: sp4 0.5s infinite alternate;
}

@keyframes sp4-0 {
  0%,
  24.99% {
    transform: rotate(0deg);
  }
  25%,
  49.99% {
    transform: rotate(90deg);
  }
  50%,
  74.99% {
    transform: rotate(180deg);
  }
  75%,
  100% {
    transform: rotate(270deg);
  }
}

@keyframes sp4 {
  100% {
    transform: translate(-10px, -10px);
  }
}

.shapes-5 {
  width: 40px;
  height: 40px;
  display: flex;
  transform-origin: 50% 125%;
  animation: sp5-0 1.5s infinite linear;
}

.shapes-5:before,
.shapes-5:after {
  content: "";
  flex: 1;
  background: orange;
  animation: inherit;
  transform-origin: bottom left;
  animation-name: sp5-1;
}

.shapes-5:before {
  transform-origin: bottom right;
  --s: -1;
}

@keyframes sp5-0 {
  0%,
  10% {
    transform: translateY(0) scaleY(1);
  }
  49.99% {
    transform: translateY(-75%) scaleY(1);
  }
  50% {
    transform: translateY(-75%) scaleY(-1);
  }
  90%,
  100% {
    transform: translateY(-150%) scaleY(-1);
  }
}

@keyframes sp5-1 {
  10%,
  90% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(calc(var(--s, 1) * 90deg));
  }
}

.shapes-6 {
  width: 40px;
  height: 40px;
  color: #25b09b;
  position: relative;
  background: linear-gradient(currentColor 0 0) center/100% 10px, linear-gradient(currentColor 0 0) center/10px 100%;
  background-repeat: no-repeat;
}

.shapes-6:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(currentColor 0 0) 0 0, linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 0 100%, linear-gradient(currentColor 0 0) 100% 100%;
  background-size: 15.5px 15.5px;
  background-repeat: no-repeat;
  animation: sp6 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes sp6 {
  33% {
    inset: -10px;
    transform: rotate(0deg);
  }
  66% {
    inset: -10px;
    transform: rotate(90deg);
  }
  100% {
    inset: 0;
    transform: rotate(90deg);
  }
}

.shapes-7 {
  width: 40px;
  height: 60px;
  color: #514b82;
  position: relative;
}

.shapes-7::before,
.shapes-7::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 67%, 50% 67%, 50% 34%, 0 34%);
  animation: sp7 2s infinite;
}

.shapes-7::after {
  --s: -1, -1;
}

@keyframes sp7 {
  0%,
  10% {
    transform: scale(var(--s, 1)) translate(0, 0) rotate(0deg);
  }
  33% {
    transform: scale(var(--s, 1)) translate(0, -20px) rotate(0deg);
  }
  66% {
    transform: scale(var(--s, 1)) translate(10px, -20px) rotate(-90deg);
  }
  90%,
  100% {
    transform: scale(var(--s, 1)) translate(10px, -10px) rotate(-90deg);
  }
}

.shapes-8 {
  width: 40px;
  height: 40px;
  color: #f03355;
  position: relative;
  background: radial-gradient(10px, currentColor 94%, #0000);
}

.shapes-8:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(9px at bottom right, #0000 94%, currentColor) top left,
    radial-gradient(9px at bottom left, #0000 94%, currentColor) top right,
    radial-gradient(9px at top right, #0000 94%, currentColor) bottom left,
    radial-gradient(9px at top left, #0000 94%, currentColor) bottom right;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  animation: sp8 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes sp8 {
  33% {
    inset: -10px;
    transform: rotate(0deg);
  }
  66% {
    inset: -10px;
    transform: rotate(90deg);
  }
  100% {
    inset: 0;
    transform: rotate(90deg);
  }
}

.shapes-9 {
  width: 40px;
  height: 20px;
  background: orange;
  position: relative;
  animation: sp9-0 1.5s infinite linear;
}

.shapes-9:before,
.shapes-9:after {
  content: "";
  position: absolute;
  background: inherit;
  bottom: 100%;
  width: 50%;
  height: 100%;
  animation: inherit;
  animation-name: sp9-1;
}

.shapes-9:before {
  left: 0;
  --s: -1, 1;
}

.shapes-9:after {
  right: 0;
}

@keyframes sp9-0 {
  0%,
  30% {
    transform: translateY(0) scaleY(1);
  }
  49.99% {
    transform: translateY(-50%) scaleY(1);
  }
  50% {
    transform: translateY(-50%) scaleY(-1);
  }
  70%,
  100% {
    transform: translateY(-100%) scaleY(-1);
  }
}

@keyframes sp9-1 {
  0%,
  10%,
  90%,
  100% {
    transform: scale(var(--s, 1)) translate(0);
  }
  30%,
  70% {
    transform: scale(var(--s, 1)) translate(20px);
  }
  50% {
    transform: scale(var(--s, 1)) translate(20px, 20px);
  }
}

.shapes-10 {
  width: 40px;
  height: 40px;
  display: flex;
  transform-origin: 0 150%;
  animation: sp10-0 2s infinite linear;
}

.shapes-10:before,
.shapes-10:after {
  content: "";
  flex: 1;
  background: #f03355;
  animation: sp10-1 1s infinite linear alternate;
  border-radius: 100px 0 0 100px;
  transform-origin: 100% 100%;
}

.shapes-10:after {
  border-radius: 0 100px 100px 0;
  transform-origin: 0 100%;
  --s: -1;
}

@keyframes sp10-0 {
  0%,
  10% {
    transform: translateY(0) scaleY(1);
  }
  49.99% {
    transform: translateY(-100%) scaleY(1);
  }
  50% {
    transform: translateY(-100%) scaleY(-1);
  }
  90%,
  100% {
    transform: translateY(-200%) scaleY(-1);
  }
}

@keyframes sp10-1 {
  0%,
  20% {
    transform: rotate(0deg) translate(0, 0) rotate(0deg);
  }
  50% {
    transform: rotate(calc(var(--s, 1) * -90deg)) translate(0, 0) rotate(0deg);
  }
  100% {
    transform: rotate(calc(var(--s, 1) * -90deg)) translate(0, -20px) rotate(calc(var(--s, 1) * -90deg));
  }
}

.arcade-1 {
  width: 45px;
  height: 30px;
  animation: a1 2s infinite linear;
}

@keyframes a1 {
  0%,
  25% {
    background: linear-gradient(#e50021 0 0) 50% 0/66% 100% no-repeat;
  }
  25.1%,
  50% {
    background: linear-gradient(#004ce4 0 0) 0 0/100% 50% no-repeat, linear-gradient(#004ce4 0 0) 0 0/33% 100% no-repeat;
  }
  50.1%,
  75% {
    background: linear-gradient(#00e622 0 0) 100% 0/66% 50% no-repeat,
      linear-gradient(#00e622 0 0) 0 100%/66% 50% no-repeat;
  }
  75.1%,
  100% {
    background: linear-gradient(#9d0be6 0 0) 0 100%/100% 50% no-repeat,
      linear-gradient(#9d0be6 0 0) 50% 0 /33% 50% no-repeat;
  }
}

/*.arcade-2 {
	width: 45px;
	height: 30px;
	background: linear-gradient(#004ce4 0 0) 0 100%/100% 50%,
	linear-gradient(#004ce4 0 0) 0 0   /calc(100%/3) 100%;
	background-repeat: no-repeat;
	position: relative;
	clip-path: inset(-100% 0 0 0);
	animation: a2-0 2s infinite steps(4);
}

.arcade-2::before,
.arcade-2::after {
	content: "";
	position: absolute;
	inset: -50% 0 50%;
	background: linear-gradient(#00e622 0 0) 0 0      /calc(2*100%/3) 50%,
	linear-gradient(#00e622 0 0) 100% 100%/calc(2*100%/3) 50%;
	background-repeat: no-repeat;
	animation: inherit;
	animation-name: a2-1;
}

.arcade-2::after {
	inset: -100% 0 100%;
	background: linear-gradient(#e50021 0 0) 0    0/100%         50%,
	linear-gradient(#e50021 0 0) 100% 0/calc(100%/3) 100%;
	background-repeat: no-repeat;
	animation-name: a2-2;
}

@keyframes a2-0 {
	0% {
		transform: translateY(-250%);
		clip-path: inset(100% 0 0 0)
	}
	25%, 100% {
		transform: translateY(0);
		clip-path: inset(-100% 0 0 0)
	}
}

@keyframes a2-1 {
	0%, 25% {
		transform: translateY(-250%)
	}
	50%, 100% {
		transform: translateY(0)
	}
}

@keyframes a2-2 {
	0%, 50% {
		transform: translateY(-250%)
	}
	75%, 100% {
		transform: translateY(0)
	}
}*/

/*.arcade-3 {
	width: 80px;
	height: 70px;
	border: 5px solid #000;
	padding: 0 8px;
	background: linear-gradient(#fff 0 0) 0    0/8px 20px,
	linear-gradient(#fff 0 0) 100% 0/8px 20px,
	radial-gradient(farthest-side, #fff 90%, #0000) 0 5px/8px 8px content-box,
	#000;
	background-repeat: no-repeat;
	animation: a3 2s infinite linear;
}

@keyframes a3 {
	25% {
		background-position: 0 0, 100% 100%, 100% calc(100% - 5px)
	}
	50% {
		background-position: 0 100%, 100% 100%, 0 calc(100% - 5px)
	}
	75% {
		background-position: 0 100%, 100% 0, 100% 5px
	}
}*/

.arcade-4 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #000 98%, #0000) 55% 20%/8px 8px no-repeat, #fc0;
  box-shadow: 2px -6px 12px 0 inset rgba(0, 0, 0, 0.7);
  animation: a4 0.5s infinite steps(5) alternate;
}

@keyframes a4 {
  0% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 100% 65%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 35%);
  }
}

/*.arcade-5 {
	width: 90px;
	height: 24px;
	padding: 2px 0;
	display: flex;
	animation: a5-0 3s infinite steps(6);
	background: linear-gradient(#000 0 0) 0 0/0% 100% no-repeat,
	radial-gradient(circle 3px, #eeee89 90%, #0000) 0 0/20% 100% #000;
	overflow: hidden;
}

.arcade-5::before {
	content: "";
	width: 20px;
	transform: translate(-100%);
	border-radius: 50%;
	background: #ffff2d;
	animation: a5-1 .25s .153s infinite steps(5) alternate,
	a5-2 3s infinite linear;
}

@keyframes a5-1 {
	0% {
		clip-path: polygon(50% 50%, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%)
	}
	100% {
		clip-path: polygon(50% 50%, 100% 65%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 35%)
	}
}

@keyframes a5-2 {
	100% {
		transform: translate(90px)
	}
}

@keyframes a5-0 {
	100% {
		background-size: 120% 100%, 20% 100%
	}
}*/

.arcade-6 {
  width: 80px;
  height: 60px;
  background: linear-gradient(#fff 0 0) left / calc(50% - 15px) 8px no-repeat,
    linear-gradient(#fff 0 0) right/calc(50% - 15px) 8px no-repeat,
    conic-gradient(from 135deg at top, #0000, red 1deg 90deg, #0000 91deg) bottom/14px 8px repeat-x, #000;
  border-bottom: 2px solid red;
  position: relative;
  overflow: hidden;
  animation: a6-0 1s infinite linear;
}

.arcade-6::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 14px;
  background: lightblue;
  left: -5px;
  animation: a6-1 2s infinite cubic-bezier(0, 100, 1, 100), a6-2 2s infinite linear;
}

@keyframes a6-0 {
  50% {
    background-position: left, right, bottom -2px left -4px;
  }
}

@keyframes a6-1 {
  0%,
  27% {
    bottom: calc(50% + 4px);
  }
  65%,
  100% {
    bottom: calc(50% + 4.1px);
  }
}

@keyframes a6-2 {
  100% {
    left: 100%;
  }
}

.arcade-7 {
  width: 70px;
  height: 50px;
  background: conic-gradient(from 135deg at top, #0000, #fff 1deg 90deg, #0000 91deg) right -20px bottom 8px/18px 9px,
    linear-gradient(#fff 0 0) bottom/100% 8px, #000;
  background-repeat: no-repeat;
  border-bottom: 8px solid #000;
  position: relative;
  animation: a7-0 2s infinite linear;
}

.arcade-7::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 14px;
  background: lightblue;
  left: 10px;
  animation: a7-1 2s infinite cubic-bezier(0, 200, 1, 200);
}

@keyframes a7-0 {
  100% {
    background-position: left -20px bottom 8px, bottom;
  }
}

@keyframes a7-1 {
  0%,
  50% {
    bottom: 8px;
  }
  90%,
  100% {
    bottom: 8.1px;
  }
}

.arcade-8 {
  font-size: 17px;
  font-family: monospace;
  font-weight: bold;
  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0),
    linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  background-size: calc(1ch + 1px) 100%;
  background-repeat: no-repeat;
  border-bottom: 10px solid #0000;
  position: relative;
  animation: a8-0 3s infinite linear;
  clip-path: inset(-20px 0);
}

.arcade-8::before {
  content: "Loading";
}

.arcade-8::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 14px;
  background: #25adda;
  left: -10px;
  bottom: 100%;
  animation: a8-1 3s infinite linear;
}

@keyframes a8-0 {
  0%,
  12.5% {
    background-position: calc(0 * 100% / 6) 0, calc(1 * 100% / 6) 0, calc(2 * 100% / 6) 0, calc(3 * 100% / 6) 0,
      calc(4 * 100% / 6) 0, calc(5 * 100% / 6) 0, calc(6 * 100% / 6) 0;
  }
  25% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 0, calc(2 * 100% / 6) 0, calc(3 * 100% / 6) 0,
      calc(4 * 100% / 6) 0, calc(5 * 100% / 6) 0, calc(6 * 100% / 6) 0;
  }
  37.5% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 40px, calc(2 * 100% / 6) 0, calc(3 * 100% / 6) 0,
      calc(4 * 100% / 6) 0, calc(5 * 100% / 6) 0, calc(6 * 100% / 6) 0;
  }
  50% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 40px, calc(2 * 100% / 6) 40px, calc(3 * 100% / 6) 0,
      calc(4 * 100% / 6) 0, calc(5 * 100% / 6) 0, calc(6 * 100% / 6) 0;
  }
  62.5% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 40px, calc(2 * 100% / 6) 40px,
      calc(3 * 100% / 6) 40px, calc(4 * 100% / 6) 0, calc(5 * 100% / 6) 0, calc(6 * 100% / 6) 0;
  }
  75% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 40px, calc(2 * 100% / 6) 40px,
      calc(3 * 100% / 6) 40px, calc(4 * 100% / 6) 40px, calc(5 * 100% / 6) 0, calc(6 * 100% / 6) 0;
  }
  87.4% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 40px, calc(2 * 100% / 6) 40px,
      calc(3 * 100% / 6) 40px, calc(4 * 100% / 6) 40px, calc(5 * 100% / 6) 40px, calc(6 * 100% / 6) 0;
  }
  100% {
    background-position: calc(0 * 100% / 6) 40px, calc(1 * 100% / 6) 40px, calc(2 * 100% / 6) 40px,
      calc(3 * 100% / 6) 40px, calc(4 * 100% / 6) 40px, calc(5 * 100% / 6) 40px, calc(6 * 100% / 6) 40px;
  }
}

@keyframes a8-1 {
  100% {
    left: 115%;
  }
}

.arcade-9 {
  font-size: 17px;
  font-family: monospace;
  font-weight: bold;
  background: linear-gradient(#000 0 0) left, linear-gradient(#000 0 0) right;
  background-repeat: no-repeat;
  border-right: 5px solid #0000;
  border-left: 5px solid #0000;
  background-origin: border-box;
  position: relative;
  animation: a9-0 2s infinite;
}

@keyframes a9-0 {
  0%,
  25% {
    background-size: 50% 100%;
  }
  25.1%,
  75% {
    background-size: 0 0, 50% 100%;
  }
  75.1%,
  100% {
    background-size: 0 0, 0 0;
  }
}

.arcade-9::before {
  content: "Loading";
}

.arcade-9::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 22px;
  height: 60px;
  background: linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0) bottom / 22px 20px,
    linear-gradient(90deg, red 4px, #0000 0 calc(100% - 4px), red 0) bottom 10px left 0/22px 6px,
    linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px, linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
  background-repeat: no-repeat;
  animation: a9-1 2s infinite;
}

@keyframes a9-1 {
  25% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: 0;
  }
  25.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: 0;
  }
  50% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px);
  }
}

.arcade-10 {
  font-size: 17px;
  font-family: monospace;
  font-weight: bold;
  padding: 30px 2px 50px;
  background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box no-repeat;
  position: relative;
  overflow: hidden;
  animation: a10-0 2s infinite cubic-bezier(1, 175, 0.5, 175);
}

@keyframes a10-0 {
  0%,
  30% {
    background-position: 0 0;
  }
  50%,
  100% {
    background-position: 0 -0.2px;
  }
}

.arcade-10::before {
  content: "Loading";
}

.arcade-10::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 28px;
  top: 110%;
  left: calc(50% - 16px);
  background: linear-gradient(90deg, #0000 12px, #f92033 0 22px, #0000 0 26px, #fdc98d 0 32px, #0000) bottom 26px left
      50%,
    linear-gradient(90deg, #0000 10px, #f92033 0 28px, #fdc98d 0 32px, #0000 0) bottom 24px left 50%,
    linear-gradient(
        90deg,
        #0000 10px,
        #643700 0 16px,
        #fdc98d 0 20px,
        #000 0 22px,
        #fdc98d 0 24px,
        #000 0 26px,
        #f92033 0 32px,
        #0000 0
      )
      bottom 22px left 50%,
    linear-gradient(
        90deg,
        #0000 8px,
        #643700 0 10px,
        #fdc98d 0 12px,
        #643700 0 14px,
        #fdc98d 0 20px,
        #000 0 22px,
        #fdc98d 0 28px,
        #f92033 0 32px,
        #0000 0
      )
      bottom 20px left 50%,
    linear-gradient(
        90deg,
        #0000 8px,
        #643700 0 10px,
        #fdc98d 0 12px,
        #643700 0 16px,
        #fdc98d 0 22px,
        #000 0 24px,
        #fdc98d 0 30px,
        #f92033 0 32px,
        #0000 0
      )
      bottom 18px left 50%,
    linear-gradient(90deg, #0000 8px, #643700 0 12px, #fdc98d 0 20px, #000 0 28px, #f92033 0 30px, #0000 0) bottom 16px
      left 50%,
    linear-gradient(90deg, #0000 12px, #fdc98d 0 26px, #f92033 0 30px, #0000 0) bottom 14px left 50%,
    linear-gradient(
        90deg,
        #fdc98d 6px,
        #f92033 0 14px,
        #222a87 0 16px,
        #f92033 0 22px,
        #222a87 0 24px,
        #f92033 0 28px,
        #0000 0 32px,
        #643700 0
      )
      bottom 12px left 50%,
    linear-gradient(
        90deg,
        #fdc98d 6px,
        #f92033 0 16px,
        #222a87 0 18px,
        #f92033 0 24px,
        #f92033 0 26px,
        #0000 0 30px,
        #643700 0
      )
      bottom 10px left 50%,
    linear-gradient(90deg, #0000 10px, #f92033 0 16px, #222a87 0 24px, #feee49 0 26px, #222a87 0 30px, #643700 0) bottom
      8px left 50%,
    linear-gradient(90deg, #0000 12px, #222a87 0 18px, #feee49 0 20px, #222a87 0 30px, #643700 0) bottom 6px left 50%,
    linear-gradient(90deg, #0000 8px, #643700 0 12px, #222a87 0 30px, #643700 0) bottom 4px left 50%,
    linear-gradient(90deg, #0000 6px, #643700 0 14px, #222a87 0 26px, #0000 0) bottom 2px left 50%,
    linear-gradient(90deg, #0000 6px, #643700 0 10px, #0000 0) bottom 0 left 50%;
  background-size: 34px 2px;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: a10-1;
}

@keyframes a10-1 {
  50% {
    top: 109.5%;
  }
  100% {
    top: 109.5%;
  }
}
</style>
<style lang="less">
.comp-loading {
}
</style>
